<include file="/public/header" />
<!-- // 重定位style -->
<style>
    .layui-form-item .layui-input-inline .layui-form-radio {
        margin-right: 1px;
    }

.layui-table-cell {
    font-size:14px;
    padding:0 5px;
    height:auto;
    overflow:visible;
    text-overflow:inherit;
    white-space:normal;
    word-break: break-all;
}
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                    <!-- <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="material" lay-search="">
                                <option value="">{:__('原材料模糊搜索')}</option>
                                <foreach $material as $v>
                                    <option value="{$v.title}">{$v.title}</option>
                                </foreach>
                            </select>
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <div class="layui-form-label">{:__('配方名称')}</div>
                        <div class="layui-input-inline "><input name="title" class="layui-input" type="text"
                                placeholder="{:__('配方|栏目名称')}" /></div>
                    </div>
                    <div class="layui-inline">
                        <!-- // 默认搜索 -->

                        <button class="layui-btn icon-btn" lay-filter="treeSearch" lay-submit>
                            <i class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                        <!-- // 打开添加页面 -->
                        <button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加栏目')}" data-disable="true"
                            data-url="#editforms">
                            <i class="layui-icon layui-icon-add-1"></i>{:__('添加栏目')}
                        </button>
                        <button data-area="900px,95%" class="layui-btn icon-btn" lay-open=""
                            data-title="{:__('添加')}{:__('配方')}" data-url="{:url('/system/formula/fadd')}" callback="add"
                            lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>{:__('添加配方')}
                        </button>
                        <!-- <button class="layui-btn layui-btn-primary icon-btn" id="expandAll"><i
                                class="layui-icon layui-icon-templeate-1"></i>{:__('展开全部')}</button>
                        <button class="layui-btn layui-btn-danger icon-btn" id="foldAll"><i
                                class="layui-icon layui-icon-add-1"></i>{:__('折叠全部')}</button> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- // 创建数据表实例 -->
        <table class="layui-hide" id="lay-tableList" lay-filter="lay-tableList"></table>
    </div>

</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms">
    <div class="layui-fluid layui-bg-white">
        <form class="layui-form" lay-filter="editforms" >
            <input type="text" name="id" hidden="">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red; ">* </span>{:__('栏目名称')}</label>
                <div class="layui-input-inline">
                    <input name="title" placeholder="{:__('请输入栏目名称')}" type="text" class="layui-input"  lay-verify="required" />
                </div>
            </div>
            <div class="layui-footer layui-form-item layui-center "  >
                <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
                <button class="layui-btn" lay-edit="{:url('/system/formula/edit')}" lay-add="{:url('/system/formula/add')}" data-table="true"  lay-filter="submitPage"  lay-submit>{:__('提交')}</button>
            </div>
        </form>
    </div>
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <!-- 注意，添加的回调函数里面 增加了data-disable="true"属性，也就是不会执行form.val方法 -->
{{#  if(d.isParent){ }}
<a class="layui-table-text" data-title="{:__('编辑栏目')}" data-url="#editforms" lay-event="edit" >{:__('编辑栏目')}</a>
{{# } }}
{{# if(!d.isParent){ }}
<a class="layui-table-text" data-title="{:__('编辑配方')} {{d.title}}" 
        data-area="900px,95%" data-url="{:url('/system/formula/fadd')}?id={{d.id}}"  lay-event="edit" >{:__('编辑配方')}</a>
{{# } }}
<div class="layui-divider layui-divider-vertical"></div>
<a class="layui-table-text" data-url="{:url('/system/formula/del')}?id={{d.id}}" lay-event="del">{:__('删除')}</a>
</script>
<script src="__STATICADMIN__module/xmselect/xmselect.js?v={:release()}"></script>
<include file="/public/footer" />
<script>
    layui.use(['admin', 'form', 'treetable', 'iconPicker'], function () {
        var jquery = layui.jquery;
        var admin = layui.admin;
        var form = layui.form;
        var table = layui.table;
        var treetable = layui.treetable;
        var iconPicker = layui.iconPicker;
        var tableURL = "{:url('/system/formula/index')}";
        // 渲染初始化表格
        var renderTable = function (tableURL) {
            treetable.render({
                elem: '#lay-tableList',
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'topid',
                url: tableURL,
                cellMinWidth: 100,
                treeDefaultClose: true,
                cols: [[
                    {
                        field: 'id', width: 50, templet: function (d) {
                            if (d.isParent) {
                                var html = '<input disabled type="checkbox" name="layTableCheckbox" lay-skin="primary">';
                            } else {
                                var html = '<input type="checkbox" name="layTableCheckbox" lay-skin="primary">';
                            }
                            return html;
                        }
                    },
                    { field: 'id', width: 80, title: '{:__("ID")}' },
                    { field: 'title', width: 300, title: '{:__("配方名称")}' },
                    { field: 'total', width: 300, title: '{:__("配方总重(KG)")}' },
                    { field: 'text', title: '{:__("详情")}',templet:function(d){
                        return '<div class="text">' +d.text + '</div>';
                    }},
                    { align: 'center', toolbar: '#tableBar', width: 220, title: '{:__("操作")}' },
                ]]
            });
        }
        // 监听搜索 serialize
        form.on('submit(treeSearch)', function (data) {

            var whereURL = '',
                field = data.field;
            for (var key in field) {
                whereURL += key + '=' + field[key];
                whereURL += '&';
            }
            // 拼接字符串
            whereURL = whereURL.replace(/(.*)&/, '$1 ');
            whereURL = tableURL + '?' + whereURL;
            renderTable(whereURL);
        })

        // 展开所有
        jquery('#expandAll').click(function () {
            treetable.expandAll('#lay-tableList');
        })

        // 折叠所有
        jquery('#foldAll').click(function () {
            treetable.foldAll('#lay-tableList');
        });

        // 执行初始化
        renderTable(tableURL);
    });

</script>